<template>
  <uni-popup ref="popup" type="bottom">
    <view class="bgWite">
      <view class="title flex flex-align flex-center">可用优惠券（{{prop.coupon.length}}）</view>
        <view class="colse" @click="close">
          <uni-icons type="closeempty" size="20"></uni-icons>
        </view>
        <view class="scrollView">
          <view class="quanList">
            <view class="quan flex" v-for="(item,index) in prop.coupon" :key="index" @click="selectData(item)">
              <view class="left flex flex-direction flex-center">
                <view>
                  <view class="price"><text>￥</text>{{item.cash_amount}}</view>
                  <view class="miaoshu">满{{item.usage_amount}}元可用</view>
                </view>
              </view>
              <view class="right flex flex-direction flex-bt">
                <view class="title flex-1">{{item.name}}</view>
                <view class="time flex-1">有效期至{{timestampToDateTime(item.lastest_at)}}</view>
                <view class="miaoshu flex-1">{{item.desc}}</view>
              </view>
              <view class="checked">
                <uni-icons color="#FE7431" :type="item.check?'checkbox-filled':'circle'" size="26"></uni-icons>
              </view>
            </view>
          </view>
        </view>
      <view class="submite" @click="subMite">
        确定
      </view>
    </view>
  </uni-popup>
</template>



<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {timestampToDateTime } from '@/utils/tools';
const prop =  defineProps({
  show: {
    type: Boolean,
    default: true
  },
  coupon: {
    type: Array,
    default: () => [] 
  },
  overlayCoupon: {
    type: Number,
    default: 1
  },
  dataInfo: {
    type: Object,
    default: () => ({}) 
  }
})

const emit = defineEmits(['submit', 'update:show'])
onMounted(() => {})
const popup = ref<any>(null)
async function open() {
  popup.value?.open('bottom')
  updateShow(true)
}
const selectInfo = ref([])
const amount = ref(0)
const num = ref(0)
function selectData(item: any) {
  if(prop.dataInfo.use_coupon_num>1){
    if(item.check){
      item.check = false
      amount.value -= Number(item.cash_amount);
      num.value -= 1;
    }else{
      if((Number(amount.value)+Number(item.cash_amount))>Number(prop.dataInfo.max_coupon_deduction)||(num.value+1)>prop.dataInfo.use_coupon_num){
        let title = ''
        if((Number(amount.value)+Number(item.cash_amount))>Number(prop.dataInfo.max_coupon_deduction)){
          title = '最多只能抵扣'+prop.dataInfo.max_coupon_deduction+'元'
        }else{
          title = '最多只能选择'+prop.dataInfo.use_coupon_num+'张优惠券'
        }
        uni.showToast({
          title: title,
          icon:'none',
          duration: 1000
        })
      }else{
        item.check = true
        num.value += 1;
        amount.value += Number(item.cash_amount); 
      }
    }
  }else{
    if(item.check){
      item.check = false
      amount.value = 0
    }else{
      prop.coupon.map((item:any)=>{
        item.check = false
      })
      item.check = true
      amount.value = Number(item.cash_amount);
    }
  }
  
}
function close() {
  popup.value?.close()
  updateShow(false)
}
function subMite(value: any) {
  selectInfo.value = []
  prop.coupon.map((item:any)=>{
    if(item.check){
      const obj = {
        currency_id: item.currency,
        have_id: item.have_id,
        amount: item.cash_amount,
        amount_to_cash: item.cash_amount,
        name: item.name,
        kind: item.kind,
      }
      selectInfo.value.push(obj)
    } 
  })
  emit('submit', JSON.stringify(selectInfo.value))
  close()
  selectInfo.value
}
function updateShow(value: boolean) {
  emit('update:show', value)
}
defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.bgWite{background: #F5F6F7;max-height: 1000rpx;border-radius: 30rpx 30rpx 0 0;position: relative;
  padding-bottom: 30rpx;
  .title{font-size: 32rpx;height:90rpx;}
  .colse{position: absolute;right: 30rpx;top:30rpx;}
  .submite{
   height: 80rpx;background: #FE7431;color: #fff;font-size: 32rpx;font-weight: bold;border-radius: 80rpx;display: flex;justify-content: center;align-items: center;
    font-size: 26rpx;margin: 30rpx 30rpx 0;
  }
  .quanList{
   .quan{background: #fff;margin: 0 30rpx 20rpx;border-radius: 20rpx;position: relative;
      .left{width: 185rpx;height: 185rpx;background: #FE7431;text-align: center;border-radius: 20rpx;margin-right: 20rpx;color: #fff;
        .price{font-size: 36rpx;font-weight: bold;
         text{font-size: 24rpx;}
        }
        .miaoshu{font-size: 24rpx;margin-top: 6rpx;}
      }
      .right{
        box-sizing: border-box;
        .title{font-size: 26rpx;color: #323233;font-weight: bold;padding-top: 20rpx;}
        .time{
         font-size: 24rpx;color: #969799;margin-top: 6rpx;
        }
        .miaoshu{font-size: 24rpx;color: #969799;margin-top: 6rpx;max-width: 420rpx;margin-bottom: 10rpx;}
      }
     .checked{position: absolute;right: 30rpx;top: 50%;transform: translateY(-50%);}
    }
  }
  .scrollView{max-height: 700rpx;overflow-y: auto;}
}
</style>
